<!-- partial:index.partial.html -->
<input type="checkbox" class="absolute hidden w-20 h-20 z-5" id="slash-open-trigger" />
<label
	for="slash-open-trigger"
	class="absolute cursor-pointer z-5 hv-center btn btn-primary btn-ghost slash-open-label"
>
	Slash!
</label>
<main class="relative flex items-center justify-center w-screen h-screen slash-open">
	<div class="flex flex-col text-center play-state-inherit">
		<div class="text-3xl font-bold fade-in" style="animation-delay: 1.2s;">
			Slash Open Animation
		</div>
		<div class="fade-in" style="animation-delay: 1.4s;">made by alphardex with pure css</div>
	</div>
</main>
<!-- partial -->

<style>
	body {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		margin: 0;
	}

	.play-state-inherit > * {
		animation-play-state: inherit !important;
	}

	#slash-open-trigger:checked ~ .slash-open-label {
		opacity: 0;
		cursor: auto;
	}
	#slash-open-trigger:checked ~ .slash-open > * {
		animation-play-state: running;
	}
	#slash-open-trigger:checked ~ .slash-open::before,
	#slash-open-trigger:checked ~ .slash-open::after {
		animation-play-state: running;
	}

	.slash-open {
		--cover-color: black;
		--slash-color: white;
		--slash-scale: 0.005;
	}
	.slash-open::before {
		position: absolute;
		content: '';
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--cover-color);
		animation: hide 1.2s var(--ease-in-out-quint) both;
	}
	.slash-open::after {
		position: absolute;
		content: '';
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--slash-color);
		transform: scaleY(var(--slash-scale));
		animation: slash 1.2s var(--ease-in-out-quint) both;
	}
	.slash-open > * {
		animation-play-state: paused;
	}
	.slash-open::before,
	.slash-open::after {
		animation-play-state: paused;
	}

	.fade-in {
		opacity: 0;
		animation: fade-in 0.6s both;
	}

	@keyframes slash {
		0% {
			transform: scale(0, var(--slash-scale));
			transform-origin: left;
		}
		49%,
		50% {
			transform: scale(1, var(--slash-scale));
			transform-origin: left;
		}
		51%,
		52% {
			transform: scale(1, var(--slash-scale));
			transform-origin: center;
		}
		100% {
			transform: scale(1, 1);
			transform-origin: center;
		}
		99.9%,
		100% {
			visibility: hidden;
		}
	}
	@keyframes hide {
		99.9%,
		100% {
			visibility: hidden;
		}
	}
</style>
